<template>
  <view class="index-page">
    <view class="part-one">
      <view class="part-one-one">
        <img
          class="part-one-nav"
          src="@/static/icon/common/orientation.png"
          alt=""
        />
      </view>
      <view class="part-one-two">
        <view class="part-ot-text">当前位置</view>
        <view class="part-ot-nav">{{ orientation }}</view>
      </view>
      <view class="part-one-third">
        <img
          class="part-otr-avatar"
          src="@/static/icon/common/avatar.png"
          alt=""
        />
        <text class="part-otr-username">{{ username }}</text>
      </view>
    </view>
    <view class="part-two">
      <map
        class="pt-map"
        name=""
        :latitude="latitude"
        :longitude="longitude"
        :markers="markers"
        :polyline="polylines"
        @markertap="markertap"
      ></map>
    </view>
    <view class="part-third">
      <view class="title"> 描述病情 </view>
      <view style="display: flex; align-items: center; margin-bottom: 20rpx">
        <img
          style="
            width: 22rpx;
            height: 100%;
            display: inline;
            margin-left: 20rpx;
          "
          src="@/static/icon/common/edit.png"
          alt=""
        />
        <view style="margin-left: 16rpx" @click="editshow = !editshow"
          >编辑</view
        >
      </view>

      <u-input
        v-show="editshow"
        v-model="DiseaseDesc"
        type="textarea"
        border
        class="textarea"
        height="200"
        auto-height

      />
      <!-- <textarea
        class="textarea"
        name=""
        id=""
        auto-height
        :value="DiseaseDesc"
        cols="60"
        rows="30"
      ></textarea> -->

      <view class="tags-box" v-show="editshow">
        <view class="tags" v-for="(item, index) in tags" :key="index">
          <view class="tag" @click="tagClick(item)">{{
            item.value
          }}</view></view
        >
      </view>
      <button class="confirm" v-show="editshow" size="mini" type="primary">
        确认
      </button>
      <view class="voice-input">
        <img
          style="width: 22rpx; height: 32rpx"
          src="@/static/icon/common/micro.png"
          alt=""
        />
        <view class="voice-input-text"> 语音输入 </view>
      </view>
    </view>
    <view class="part-fourth">
      <view class="title"> 出车信息 </view>
      <view class="pf-box">
        <img class="pf-icon" src="@/static/icon/common/car.png" alt="" />
        <view class="pf-text-box">
          <view class="pf-tb-one">距离</view>
          <view class="pf-tb-two">{{ distance + 'km' }}</view>
        </view>
      </view>
      <view class="pf-box">
        <img class="pf-icon" src="@/static/icon/common/clock.png" alt="" />
        <view class="pf-text-box">
          <view class="pf-tb-one">距离到达时间</view>
          <view class="pf-tb-two">{{ Time + '分钟' }}</view>
        </view>
      </view>
      <view class="pf-box">
        <img class="pf-icon" src="@/static/icon/common/phone.png" alt="" />
        <view class="pf-text-box">
          <view class="pf-tb-one">司机电话</view>
          <view class="pf-tb-two">{{ setPhone(phone) }}</view>
        </view>
      </view>
      <view class="button-box">
        <button class="btn" type="primary" @tap="handleIsstartMove">联系志愿者</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, toRefs } from 'vue'
//数据初始化
let orientation = ref('深圳市南山区')
let username = ref('匿名用户')
let DiseaseDesc = ref('我在家里摔倒了') //病情描述
let distance = ref(6)
let Time = ref(15)
let phone = ref('13729888888')
let tags = ref([
  {
    id: 1,
    value: '胸痛'
  },
  {
    id: 2,
    value: '恶心'
  },
  {
    id: 3,
    value: '头痛'
  },
  {
    id: 4,
    value: '发热'
  },
  {
    id: 5,
    value: '呼吸困难'
  }
])
let polylines = ref([
  {
    width: 8,
    points: [],
    arrowLine: true,
    color: '#3591FC'
  }
])

let markers = ref([
  {
    id: 1,
    width: 40,
    height: 40,
    latitude: 0,
    longitude: 0,
    iconPath:'../../../static/icon/common/nav.png',
    anchor: {
      x: 0.5,
      y: 1
    }
  }
])
let latitude = ref('39.909')
let longitude = ref('116.39742')
let mapContext = ref(null) //地图对象
let IsstartMove = ref(false) //是否开始回放
let nextPointIndex = ref(1) //下一个坐标点


let editshow = ref(false)
//病情描述方法
let tagClick = (e) => {
  if (DiseaseDesc.value != '') {
    DiseaseDesc.value = DiseaseDesc.value + ',' + e.value
  } else {
    DiseaseDesc.value = e.value
  }
}
//电话正则
const setPhone = (phone) => {
  if (Number(phone) && String(phone).length === 11) {
    let mobile = String(phone)

    let reg = /^(\d{3})\d{4}(\d{4})$/

    return mobile.replace(reg, '$1****$2')
  } else {
    return phone
  }
}
//地图方法
const markertap = (e) => {
  let id = e.markerId
  console.log(id)
} //根据项目情况

const initMap = () => {
  getTrack()
  initMarkers()
  //初始化地图
  mapContext.value = uni.createMapContext('Map')
}
//设置位置（从起点开始）
const initMarkers = () => {
  console.log(polylines.value[0].points[0].latitude);
  markers.value[0].latitude = polylines.value[0].points[0].latitude
  markers.value[0].longitude = polylines.value[0].points[0].longitude
} //开始移动
const handleIsstartMove = () => {
  IsstartMove.value = true
  console.log(mapContext.value)
  moveMarkers()
} //移动坐标
const moveMarkers = () => {
  mapContext.value.translateMarker({
    markerId: markers.value[0].id || 1,
    destination: {
      latitude: polylines.value[0].points[nextPointIndex.value].latitude,
      longitude: polylines.value[0].points[nextPointIndex.value].longitude

    },
    animationEnd: (res) => {
      //播放结束，继续移动到下一个点，最后一个点时结束移动
      if (nextPointIndex.value < polylines.value[0].points.length - 1) {
        nextPointIndex.value++
        if (IsstartMove.value) {
          moveMarkers()
        }
      } else {
        nextPointIndex.value = 1
        IsstartMove.value = false
      }
    }
  })
}
//模拟轨迹
const getTrack = () => {
  polylines.value[0].points = [
    { latitude: 39.997761, longitude: 116.478935 },
    { latitude: 39.997825, longitude: 116.478939 },
    { latitude: 39.998549, longitude: 116.478912 },
    { latitude: 39.998555, longitude: 116.478998 },
    { latitude: 39.998566, longitude: 116.479282 },
    { latitude: 39.998528, longitude: 116.479658 },
    { latitude: 39.998453, longitude: 116.480151 },
    { latitude: 39.998302, longitude: 116.480784 },
    { latitude: 39.998184, longitude: 116.481149 },
    { latitude: 39.997997, longitude: 116.481573 },
    { latitude: 39.997846, longitude: 116.481863 },
    { latitude: 39.997718, longitude: 116.482072 },
    { latitude: 39.997718, longitude: 116.482362 },
    { latitude: 39.998935, longitude: 116.483633 },
    { latitude: 39.998968, longitude: 116.48367 },
    { latitude: 40.999861, longitude: 118.484648 }
  ]
}
onMounted(() => {
  initMap()

})
</script>

<style scoped>
.textarea {
  margin: auto;
  border-radius: 15rpx;
  border: 1px solid rgba(229, 231, 235, 1);
  text-align: left;
  min-height: 256rpx;
  width: 700rpx;
}
.index-page {
  width: 100%;
  height: 100vh;
  background-color: rgb(239, 246, 255);
  font-style: normal;
  text-align: center;
}
.part-one {
  display: flex;
  align-items: center;
  background-color: #fff;
}

.part-one-two {
  text-align: left;
  margin-left: 16rpx;
  flex: 5;
  /* display: flex; */
}
.part-ot-text {
  max-width: 182px;
  font-size: 28rpx;
  font-weight: 400;
  letter-spacing: 0rpx;
  line-height: 40rpx;
  color: rgba(107, 114, 128, 1);
  text-align: left;
}
.part-ot-nav {
  max-width: 182px;
  font-size: 28rpx;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 40rpx;
  color: rgba(0, 0, 0, 1);
  text-align: left;
  vertical-align: middle;
}
.part-one-nav {
  margin-left: 32rpx;
  width: 24rpx;
  height: 32rpx;
}
.part-one-third {
  margin-right: 32rpx;
  display: flex;
  align-items: center;
}
.part-otr-avatar {
  margin-right: 16rpx;
  width: 32rpx;
  height: 32rpx;
}
.part-otr-username {
  font-size: 28rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 40rpx;
  color: rgba(107, 114, 128, 1);
  text-align: left;
}
.title {
  margin: 16rpx 32rpx;

  font-size: 36rpx;
  font-weight: 600;
  letter-spacing: 0px;
  line-height: 56rpx;
  color: rgba(0, 0, 0, 1);
  text-align: left;
  vertical-align: middle;
}

.pt-map {
  margin: auto;
  text-align: center;
}

.tags-box {
  display: flex;
  align-items: center;
  margin-top: 16rpx;
  margin-left: 12rpx;
}
.tags {
  margin-left: 16rpx;
  text-align: center;
}
.tag {
  /* min-width: 96rpx; */
  padding: 0rpx 24rpx;
  white-space: nowrap;

  height: 52rpx;
  line-height: 52rpx;
  opacity: 1;
  border-radius: 12rpx;
  background: rgba(229, 231, 235, 1);
  color: rgba(107, 114, 128, 1);
  font-size: 24rpx;
  font-weight: 400;
  letter-spacing: 0rpx;

  align-items: center;
}
.voice-input {
  text-align: left;
  display: flex;
  align-items: center;
  margin-left: 32rpx;
  margin-top: 16rpx;
}
.voice-input-text {
  font-size: 28rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 40rpx;
  color: rgba(107, 114, 128, 1);
  text-align: left;
  margin-left: 16rpx;
}
.pf-box {
  display: flex;
  align-items: center;
}
.pf-icon {
  margin-left: 32rpx;
  width: 32rpx;
  height: 28rpx;
}
.pf-text-box {
  margin-left: 16rpx;
}
.pf-tb-one {
  font-size: 28rpx;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 40rpx;
  color: rgba(107, 114, 128, 1);
  text-align: left;
  vertical-align: middle;
}
.pf-tb-two {
  font-size: 28rpx;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 40rpx;
  color: rgba(0, 0, 0, 1);
  text-align: left;
  vertical-align: middle;
}
.button-box {
  margin-top: 20rpx;
}
.btn {
  width: 90%;
  color: #fff;
  font-size: 24rpx;
  background: rgba(34, 197, 94, 1);
}
.confirm {
  margin-top: 20rpx;
  left: 30%;
  width: 30%;
  color: #fff;
  font-size: 24rpx;
  background: rgba(34, 197, 94, 1);
}
</style>
